<link rel="stylesheet" data-th-href="@{css/autocomplete/autocomplete.css}">
<style>
    .autocomplete-input {
        padding: 0;
        font-family: inherit;
        float: initial;
        font-size: 1em;
        border: 0 solid rgba(0, 0, 0, 0.19);
        margin: 0;
    }
    .autocomplete-container {
        position: relative;
        width: 1rem;
        height: 1rem !important;
        margin: 0  ;
    }
    .proposal-box {
        z-index: 1000 !important;
    }
</style>
<div data-th-include="system/menu/menuAdd"></div>
<div class="card">
    <div class="tpv-main-header clearfix">
        <div class="tpv-main-tab j-main-tab"></div>
        <div id="data-table_filter" class="dataTables_filter tpv-main-filter">
            <form class="menu-table-form j-tpv-search">
                <div class="tpv-filter-layout">
                    <div class="tpv-filter-item">
                        <div class="input-group">
                            <span class="input-group-addon">
                            [[#{menu.name}]]：
                        </span>
                            <div class="form-group">
                                <input type="text" name="menuName" class="form-control">
                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                    </div>
                    <div class="tpv-filter-item">
                        <div class="input-group">
                            <span class="input-group-addon">
                            [[#{menu.type}]]：
                        </span>
                            <select class="form-control" name="type">
                                <option value="" selected>[[#{menu.all}]]</option>
                                <option value="0">[[#{menu.menu}]]</option>
                                <option value="1">[[#{menu.button}]]</option>
                            </select>
                        </div>
                    </div>
                    <div class="tpv-filter-item tpv-filter-auto">
                        <button type="button" class="btn tpv-btn-warning" onclick="refresh()" th:title="#{common.btn.reset}">[[#{common.btn.reset}]]</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card-block">
        <div class="table-responsive">
            <div id="data-table_wrapper" class="dataTables_wrapper">
                <div class="dataTables_buttons hidden-sm-down actions tpv-table-btns clearfix">
                    <div class="tpv-table-group-btns clearfix">
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="refresh()">[[#{user.flush}]]</button>
                        <div class="dropdown actions__item tpv-group-item tpv-dropdown">
                            <button type="button" data-toggle="dropdown" class="btn tpv-btn-default btn-secondary">[[#{common.btn.export}]]</button>
                            <ul class="dropdown-menu dropdown-menu-left">
                                <a href="javascript:void(0)" class="dropdown-item" data-table-action="excel" onclick="exportMenuExcel()">
                                Excel (.xlsx) </a>
                                <a href="javascript:void(0)" class="dropdown-item" data-table-action="csv" onclick="exportMenuCsv()"> CSV
                                (.csv) </a>
                            </ul>
                        </div>
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="updateMenu()" shiro:hasPermission="menu:update">[[#{menu.update}]]</button>
                        <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="deleteMenus()" shiro:hasPermission="menu:delete">[[#{menu.delete}]]</button>
                    </div>
                    <div class="tpv-table-info-other">
                        <button type="button" class="btn tpv-btn-primary btn-secondary" data-toggle="modal" data-target="#menu-add" shiro:hasPermission="menu:add">[[#{menu.add}]]</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="menuTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-src="@{js/app/system/menu/menu.js(t=${version})}"></script>
<script data-th-src="@{js/app/system/menu/menuEdit.js(t=${version})}"></script>
<script data-th-src="@{js/app/system/menu/menuUrlAndPermsList.js(t=${version})}"></script>